<template>
  <div class="register">
    <div class="center_box">
      <br>
      <br>
      <h1 class="h1">注册</h1>
      <br>
      <br>
      <br>
      <label class="label">用户名</label>
      <input type="text" class="txt_input" v-model="userInfo.userCode" />
      <br>
      <label class="label">显示昵称</label>
      <input type="text" class="txt_input" v-model="userInfo.nickName"/>
      <br>
      <label class="label">性别</label>
      <br>
      <div class="radio_box">
      <input type="radio" class="radio" v-model="userInfo.sex" value="1"/>男
      <input type="radio" class="radio" v-model="userInfo.sex" value="0"/>女
      </div>
      <br>
      <br>
      <label class="label">地区</label>
      <input type="text" class="txt_input" v-model="userInfo.address"/>
      <br>
      <label class="label">手机号码</label>
      <input type="text" class="txt_input" v-model="userInfo.phone"/>
      <br>
      <label class="label">邮箱地址</label>
      <input type="text" class="txt_input" v-model="userInfo.email"/>
      <br>
      <label class="label">密码</label>
      <input type="password" class="txt_input" v-model="userInfo.password"/>
      <br>
      <label class="label">确认密码</label>
      <input type="password" class="txt_input" v-model="userInfo.password2"/>
      <br>
      <label class="label" >验证码</label>
      <div class="captcha" @click="ramdom++"><img :src="captchaUrl"/></div>
      <input type="text" class="txt_input" v-model="userInfo.captcha"/>
      <br>

      <button class="button" @click="submit">提交</button>
      <br><br>
    </div>
    <div class="top_msg_box" v-show="userInfo.msg!=''">{{userInfo.msg}}</div>
  </div>
</template>

<script>
  import ltxService from '../services/LtxService'
    export default {
        name: "Register",
      data(){
          return {
            ramdom:1,
            captchaBaseUrl:"http://frp.voidgeek.com:7005/api/getCaptcha/",
            userInfo:{
              userCode:"",
              nickName:"CaiDingxian",
              password:"123456",password2:"123456",
              sex:"1",
              address:"潮州",
              phone:"15625538787",
              email:"1617071974@qq.com",
              msg:"请填写用户信息",


              captcha:""
            }
          }
      },
      computed:{
        captchaUrl:function () {
          let app=this;
          app.ramdom+=1;
          return app.captchaBaseUrl+app.ramdom;
        }
      },
      methods:{
          submit:function () {
            let app=this.userInfo;
            if(app.userCode.length<6||app.userCode.length>16){
              app.msg="请填写正确的用户名（6-16位任意英文数字组合，不分大小写）";
              return false;
            }
            if(app.password.length<6||app.password.length>16){
              app.msg="请填写正确的密码（6-16位任意英文数字特殊符号组合）";
              return false;
            }
            if(!app.captcha.length>0){
              app.msg="请填写验证码";
              return false;
            }
            if(!app.phone.length==11){
              app.msg="请填写正确的手机号";
              return false;
            }
            if(!app.nickName.length>0){
              app.msg="请填写正确的昵称（6-16字）";
              return false;
            }
            if(!app.email.length>0){
              app.msg="请填写正确邮箱地址";
              return false;
            }
            if(!app.address>0){
              app.msg="请填写地区";
              return false;
            }
            if(!app.password==app.password2){
              app.msg="两次输入密码不一致";
              return false;
            }

            let t=this

            ltxService.register(app).then(function (response) {
                switch (response.data.stateCode) {
                  case "PASS_ERR":
                    app.msg="用户名或密码错误";
                    break;
                  case "CAPTCHA_ERR":
                    app.msg="验证码错误";
                    break;
                  case "OK":
                    alert("注册成功，让我们前往登录")
                    t.$router.push("/login");
                    break;
                  case "USER_CODE_EXIST":
                    app.msg="用户名已存在";
                }
              })
              .catch(function (error) {
              });
          }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/base.scss";
  .top_msg_box{
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    text-align: center;
    color: white;
    padding: 2px;
    background-color: $sub;
  }
  .register{

    background-color:$bg;
    width: 100%;
    .captcha{
      width: 100px;
      height: 50px;
      margin: 10px auto;
    }

  }
</style>
